<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!--
			让键盘控制div的移动
		-->
		<div id="box"></div>
		<script type="text/javascript">
			var x = 0
			var y = 0
			var oBox = document.getElementById("box")
			document.onkeyup = function  (ev) {
				var ev = ev || event
				console.log(ev)
				switch (ev.keyCode){
					case 38:
					y = y-10;
						break;
					case 40:
					y = y+10;
					break;
					case 37:
					x = x-10;
					break;
					case 39:
					x = x+10
					break;
				}
				oBox.style.left = x + "px"
				oBox.style.top = y + "px"
			}
		</script>
	</body>
</html>
